﻿<!DOCTYPE html>
<html>
<head>
  <title>商品列表</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=1366, maximum-scale=1.0"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>

  <link href="/assets/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
  <link href="/assets/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
  <link href="/assets/data/styles.css" type="text/css" rel="stylesheet"/>
  <link href="/assets/goods/styles.css" type="text/css" rel="stylesheet"/>
  <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>


  <!-- 引入样式 -->
  <!--    <link rel="stylesheet" href="/assets/plugins/elementui/index.css">-->
  <link rel="stylesheet" href="/assets/plugins/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="/assets/css/style.css">
  <!-- 引入组件库 -->
  <script src="/assets/js/vue.js"></script>
  <script type="text/javascript" src="/assets/js/jquery.min.js"></script>
  <!--<script src="/assets/plugins/elementui/index.js"></script>-->
  <script src="/assets/js/axios-0.18.0.js"></script>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="/assets/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="/assets/element-ui/lib/index.js"></script>

  <style>
    .el-header, .el-footer {
      background-color: #f5f7f9;
      color: rgba(34, 69, 50, 0.75);
    }

    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 360px;
    }

    body > .el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }
  </style>
</head>
<body>

<div id="app">
  <div class="content-header">
    <h1>商品管理<small>商品列表</small></h1>

    <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
  </div>

  <el-divider></el-divider>

  <div >

    <el-container>
      <el-header>
        <el-steps :active="step" finish-status="success">
          <el-step title="选择商品分类" ></el-step>
          <el-step title="填写商品信息"></el-step>
          <el-step title="填写商品属性"></el-step>
        </el-steps>

      </el-header>
      <el-container v-if="step==1">
        <el-aside width="200px">
          <el-button type="info" >商品分类<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-aside>
        <el-container>
          <el-main>
            <el-cascader-panel :options="categoryOptions" @change="selectOption" size=""></el-cascader-panel>
          </el-main>
        </el-container>
      </el-container>

      <el-container v-if="step==2">
        <el-aside width="200px">
          <el-button type="info" >商品信息<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-aside>
        <el-container>
            <el-form ref="form" :model="good" label-width="160px">

              <el-form-item label="商品名称：">
                <el-input v-model="good.name"></el-input>
              </el-form-item>
              <el-form-item label="商品副标题：">
                <el-input v-model="good.caption"></el-input>
              </el-form-item>
              <el-form-item label="商品品牌：">
                <el-select v-model="good.brandId" placeholder="请选择品牌">
                  <el-option v-for="brand in brandOptions" :label="brand.label" :key="brand.value" :value="brand.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="商品介绍：">
                <el-input type="textarea" v-model="good.introduction" rows="8"></el-input>
              </el-form-item>
              <el-form-item label="商品货号：">
                <el-input v-model="good.sn"></el-input>
                <em style="color: #cf9236;font-size: 3px">如果您不输入商品货号，系统将自动生成一个唯一的货号。</em>
              </el-form-item>


              <el-form-item label="服务保障：">
                <el-checkbox-group v-model="good.saleService">
                  <el-checkbox label="无忧退货" ></el-checkbox>
                  <el-checkbox label="快速退款" ></el-checkbox>
                  <el-checkbox label="免费包邮" ></el-checkbox>
                </el-checkbox-group>
              </el-form-item>

            </el-form>

        </el-container>
      </el-container>


      <el-container v-if="step==3">
        <el-aside width="200px">
          <el-button type="info" >商品属性<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </el-aside>
        <el-container>
          <el-form ref="form" :model="good" label-width="160px">

            <el-form-item label="商品名称：">
              <el-input v-model="good.name"></el-input>
            </el-form-item>
            <el-form-item label="商品副标题：">
              <el-input v-model="good.caption"></el-input>
            </el-form-item>
            <el-form-item label="商品品牌：">
              <el-select v-model="good.brandId" placeholder="请选择品牌">
                <el-option v-for="brand in brandOptions" :label="brand.label" :key="brand.value" :value="brand.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品介绍：">
              <el-input type="textarea" v-model="good.introduction" rows="8"></el-input>
            </el-form-item>
            <el-form-item label="商品货号：">
              <el-input v-model="good.sn"></el-input>
              <em style="color: #cf9236;font-size: 3px">如果您不输入商品货号，系统将自动生成一个唯一的货号。</em>
            </el-form-item>


            <el-form-item label="服务保障：">
              <el-checkbox-group v-model="good.saleService">
                <el-checkbox label="无忧退货" ></el-checkbox>
                <el-checkbox label="快速退款" ></el-checkbox>
                <el-checkbox label="免费包邮" ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>

          </el-form>

        </el-container>
      </el-container>

    </el-container>




    <el-divider></el-divider>
    <div align="center">
      <el-button type="primary" @click="step++" v-if="step==1">
        下一步，填写商品信息
      </el-button>
      <el-button type="primary" icon="el-icon-arrow-left" v-if="step==2" @click="step--">
        上一步，选择商品分类
      </el-button>
      <el-button type="primary" @click="step++" v-if="step==2">
        下一步，填写商品属性<i class="el-icon-arrow-right el-icon--right"></i>
      </el-button>

    </div>

  </div>


</div>


<script>
  var vue = new Vue({
    el: '#app',
    data:{
      categoryOptions: [],// 商品分类列表
      brandOptions:[], //所有的品牌列表
      step:3,
      good: {
        name: null,
        caption: null,
        brandId: null,
        category1Id:null,
        category2Id:null,
        category3Id:null,
        saleService:[],
        introduction:null,
        sn:null
      }
    },
    //钩子函数，VUE对象初始化完成后自动执行  window.onload   $(function(){  });
    created() {
      this.queryCategory();
      this.queryBrands();
    },
    methods: {
      //
      //查询所有分类数据
      queryCategory(){
        axios.post("/data/categoryList.json")
                .then((res)=>{
                  if(res.data.flag){
                    this.categoryOptions = res.data.data;
                  }else {
                    this.$message.error(res.data.message);
                  }
                });
      },
      //查询所有品牌数据
      queryBrands(){
        axios.post("/data/brandList.json")
                .then((res)=>{
                  if(res.data.flag){
                    this.brandOptions = res.data.data;
                  }else {
                    this.$message.error(res.data.message);
                  }
                });

      },
      selectOption(value){
        console.log(value);
        //选择商品分类
        if(value.length==3){
          this.good.category1Id=value[0];
          this.good.category2Id=value[1];
          this.good.category3Id=value[2];
        }
      }


    }
  })
</script>
</body>
</html>
